<template>
	<view class="page">
		<view class="table-nav">
			重置您的密码
		</view>
		<view class="con">
			<view class="con-1">
				<u-input placeholder="请输入手机号" border="bottom" clearable maxlength="11" v-model="form.phone"
					fontSize="14px" color="#333333"></u-input>
			</view>
			<view class="con-1">
				<u-input placeholder="请输入验证码" placeholderClass='u-input-place' border="bottom"
					v-model="form.security_code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="con-1">
				<u-input placeholder="请输入6-12位密码" border="bottom" clearable maxlength="12" v-model="form.new_password"
					fontSize="14px" color="#333333" password></u-input>
			</view>
			<view class="con-1">
				<u-input placeholder="请确认密码" border="bottom" clearable maxlength="12" v-model="form.new_password_s"
					fontSize="14px" color="#333333" password></u-input>
			</view>
			<view class="btn-login" @click="handle">重置</view>
		</view>
	</view>
</template>

<script>
import { sendCodes, updatePassword } from "@/utils/request.js";
import helper from "@/utils/helper.js";
export default {
	data() {
		return {
			tips: '',
			value: '',
			form: {}
		}
	},
	methods: {
		async sendCodes(data) {
			return await sendCodes(data);
		},
		async updatePassword(data) {
			return await updatePassword(data)
		},
		codeChange(text) {
			this.tips = text;
		},
		handle() {
			if (!this.form.phone || !this.form.new_password || !this.form.new_password_s || !this.form.security_code) {
				uni.showToast({
					title: "请输入完整信息",
					icon: "none",
				});
				return;
			}
			if (this.form.new_password != this.form.new_password_s) {
				uni.showToast({
					title: "两次密码不一致",
					icon: "none",
				});
				return;
			}
			updatePassword(this.form).then(res => {
				console.log(res, 'res')
				if (res) {
					uni.showToast({
						title: "重置成功",
						icon: "none",
					});
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 1500)
				}
			})
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				if (!helper.validateInternationalPhoneNumber(this.form.phone)) {
					uni.showToast({
						title: "手机号格式不正确！",
						icon: "none",
					});
					return;
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					this.sendCodes(this.form).then((res) => {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					});
					// 这里此提示会被this.start()方法中的提示覆盖
					// 通知验证码组件内部开始倒计时
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
	}
}
</script>


<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to bottom, #FFB850, #F2F2F2, #FFFFFF);

	.table-nav {
		margin-left: 43rpx;
		padding-top: 130rpx;
		font-size: 44rpx;
	}

	.con {
		width: 665rpx;
		margin: 80rpx auto 0;

		.con-1 {
			font-size: 30rpx;
			margin-bottom: 16rpx;
		}

		::v-deepu-input {
			width: 625rpx;
			padding: 665rpx;
			padding: 24rpx 20rpx;
			border-radius: 16rpx;
			margin-top: 16rpx;
			border: 1rpx solid #797979;
			font-size: 28rpx;
		}

		::v-deep.u-input__inner {
			height: 100%;
			display: flex;
			align-items: center;
		}

		::v-deep .u-border {
			border: 1rpx solid #797979 !important;
		}

		.con-input {
			width: 625rpx;
			padding: 24rpx 20rpx;
			border-radius: 16rpx;
			margin-top: 16rpx;
			border: 1rpx solid #797979;
			font-size: 28rpx;
		}

		::v-deep .u-input {
			padding: 24rpx 20rpx !important;
			margin-top: 16rpx !important;
			font-size: 28rpx !important;
		}

		::v-deep.u-input-place {
			color: #7F7F7F !important;
			font-size: 28rpx !important;
		}

		::v-deep.input-placeholder {
			color: #7f7f7f !important;
		}

		::v-deep .u-border-bottom {
			border-color: #7f7f7f !important;
		}

		/deep/.u-button {
			background-color: #FFB850 !important;
			border: 1rpx solid #FFB850 !important;
		}

		::v-deep.u-button--success {
			background-color: #FFB850 !important;
			border: 1rpx solid #FFB850 !important;
		}

		.forget {
			text-align: right;
			font-size: 28rpx;
			color: #F59A23;
		}

		.btn-login {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #FFB850;
			border-radius: 132rpx;
			text-align: center;
			color: #FFFFFF;
			border: 1rpx solid #FFB850;
			margin-top: 60rpx;
		}
	}
}
</style>